<template>
  <div>
    <!--    head-->
    <!--    空骨架-->
    <template>
      <el-skeleton :animated="true"
                   :throttle="500"
                   :loading="loading"
                   :rows="7"/>
    </template>
    <div v-if="!loading">
      <el-descriptions title="编制合同申请" :column="2" border>

        <el-descriptions-item label="询价书名称">{{ enquire.enquireName }}</el-descriptions-item>
        <el-descriptions-item label="报价份数">{{ len }}</el-descriptions-item>
        <el-descriptions-item label="最高报价（元）">{{ minPrice }}</el-descriptions-item>
        <el-descriptions-item label="最低报价（元）">
          {{ maxPrice }}
        </el-descriptions-item>
      </el-descriptions>
      <div v-for="(enquireDetail,index) in enquire.enquireDetails">
        <!--      <div class="materialName">-->
        <!--        {{ enquireDetail.materialName }}-->
        <!--      </div>-->
        <!--    报价供应商  表格开始-->

        <el-table
          :data="enquireDetail.quotes"
          style="width: 100%">
          <el-table-column :label="enquireDetail.materialName">
            <template slot="header" slot-scope="scope">
              <div>
                <el-row>

                  <el-col :span="8">
                    <div class="grid-content ">
                      物资名称：{{ scope.column.label }}
                    </div>


                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content ">
                      供应商：

                      <el-select size="mini" v-model="supplierSelection[index]" placeholder="请选择供应商" @change="selectHandler">
                        <el-option :value="null">请选择供应商</el-option>
                        <el-option v-for="quote in enquireDetail.quotes" :value="JSON.stringify(quote)" :label="quote.quoCompany">{{ quote.quoCompany }}</el-option>
                      </el-select>
                    </div>

                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content ">
                      运输方式：

                      <el-select size="mini" v-model="transportModeSelection[index]" placeholder="请选择运输方式" @change="transportModeSelectionHandler">
                        <el-option :value="null">请选择运输方式</el-option>
                        <el-option v-for="item in transportMode" :value="JSON.stringify({type:item.id,id:enquireDetail.orders.id})" :label="item.desc"></el-option>
                      </el-select>
                    </div>
                  </el-col>

                </el-row>

              </div>


            </template>
            <el-table-column
              prop="quoCompany"
              label="供应商"
              width="180">
            </el-table-column>
            <el-table-column
              prop="quoteDetail.amount"
              label="数量"
              width="180">
            </el-table-column>
            <el-table-column
              prop="quoteDetail.unitPrice"
              label="单价（元/含税）">
            </el-table-column>
            <el-table-column
              prop="quoteDetail.mixPrice"
              label="运杂费（元）">
            </el-table-column>
            <el-table-column
              prop="quoteDetail.otherPrice"
              label="其它费用（元）">
            </el-table-column>
            <el-table-column
              prop="quoteDetail.sumPrice"
              label="总计（元）">
            </el-table-column>
            <el-table-column
              prop="planStartDate"
              label="计划开始交货期">
            </el-table-column>

            <el-table-column
              prop="endDate"
              label="结束交货期">
            </el-table-column>
          </el-table-column>

        </el-table>
        <!--    报价供应商  表格结束-->


      </div>
      <!--    底部报价-->
      <el-descriptions :column="1" border>

        <el-descriptions-item label="总金额（元）">
          <el-input v-model="contactApply.amount"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-input type="textarea" v-model="contactApply.remark"></el-input>
        </el-descriptions-item>
      </el-descriptions>

      <!--    底部按钮-->
      <div class="bottom">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button @click="back">返回</el-button>

      </div>
    </div>
  </div>
</template>

<script>
import quote from "@/views/quote/index.vue";
import {cloneObj} from "@/utils";

export default {
  data() {
    return {
      id: '',
      enquire: {},
      maxPrice: 0,
      minPrice: 0,
      len: 0,
      loading: true,
      contactApply: {
        equireId: '',
        remark: '',
        amount: 0,
        contractDetails: []
      },
      supplierSelection:[],
      contractDetail: {

        //物资编号
        "materialCode": null,
        //物资名字
        "materialName": null,
        // 需求编号
        "orderId":null,
        //数量
        "amount": null,
        //单价
        "unitPrice": null,
        //计量单位
        "measureUnit": null,
        //总价
        "sumPrice": null,
        //运杂费
        "mixPrice": null,
        //其他费用
        "otherPrice": null,
        //总价
        "totalPrice": null,
        //报价份数
        "statQuote":0,
        //最高价

        "topQuote":0,
        //最低价
        "lowQuote":0,
        //报价
        "quote": {},
        "mode":""
      },
      //运输方式
      "transportMode":[

      ],
      //选中的运输方式
      transportModeSelection:[]

    }
  },
  mounted() {
    let id = this.$route.query.id;
    this.id = id
    this.getData()
    // console.log(this.contractDetail)
    this.gettypeData()
  },
  methods: {
    getData() {
      this.$http({
        url: this.$http.adornUrl(`purchase/enquire/info/${this.id}`),
        method: 'get',

      }).then((data) => {

        this.enquire = data.enquire
        let quotes = []
        let enquire = data.enquire;
        this.contactApply.equireId = data.enquire.id
        // 循环查询询价详情
        data.enquire.enquireDetails.forEach((enquireDetail) => {

          let contractDetail = cloneObj(this.contractDetail)
          // 物资编号
          contractDetail.materialCode =   enquireDetail.materialCode
          contractDetail.materialName=   enquireDetail.materialName
            // 需求编号
          contractDetail.orderId =   enquireDetail.orderId
            //数量
          contractDetail.amount =   enquireDetail.amount
            //单价
          // contractDetail["unitPrice"] =   enquireDetail.measureUnit
            //计量单位
          contractDetail["measureUnit"] =   enquireDetail.measureUnit
            //总价
          // contractDetail["sumPrice"] =   enquireDetail
            //运杂费
          // contractDetail["mixPrice"] =   enquireDetail
            //其他费用
          // contractDetail["otherPrice"] =   enquireDetail
            //总价
          // contractDetail["totalPrice"] =   enquireDetail

          this.contactApply.contractDetails.push(contractDetail)
          //添加下拉选框数据绑定数组
          this.supplierSelection.push("")
          this.transportModeSelection.push("")
          //循环查询询价详情的报价
          //用于求每一个需求最大报价和最小报价
          let quotes2 =[]
          enquireDetail.quotes.forEach((quote) => {

            quotes.push(quote.quoteDetail.sumPrice)
            quotes2.push(quote.quoteDetail.sumPrice)
          })
          contractDetail["statQuote"]=enquireDetail.quotes.length
            //最高价
          contractDetail["topQuote"]=Math.max(...quotes2)
            //最低价
          contractDetail["lowQuote"]=Math.min(...quotes2)

          this.maxPrice = Math.max(...quotes)
          this.minPrice= Math.min(...quotes)

        })
        // console.log(this.contactApply.contractDetails)
        this.len = quotes.length
        console.log(quotes.length)
        this.maxPrice = Math.max(...quotes)
        this.minPrice = Math.min(...quotes)
        this.loading = false
        // console.log(this.enquire)
      }).catch((err) => {

      })
    },
    //getdataList结束
    //TODO 下拉框选择
    selectHandler(arg){
      console.log(this.contactApply.contractDetails.length)
      this.contactApply.contractDetails.forEach(contracDetail=>{
        this.supplierSelection.forEach(select=>{
          try {
            let val=JSON.parse(select)
            if(contracDetail.orderId==val.quoteDetail.orderId){
              contracDetail.quote=val
            }
          }catch (e) {
            console.log("转换异常",e)
          }

        })
      })
      // quotes.push()
      console.log( this.contactApply)
    },
    reset(){
      console.log("重置表单")
    },
    back(){
       this.$router.go(-1)
    },
    // 底部按钮
    submit() {
      let unSelect = false;
      this.contactApply.contractDetails.forEach(contractDetail=>{
        let quote =  contractDetail.quote
        let mode =  contractDetail.mode
        // quote= cloneObj(quote)
        // console.log(Object.keys(quote))
        if( quote==null || Object.keys(quote)==0|| quote==""){
          this.$message.warning("请选择供应商")
          unSelect = true
          // console.log("请选择供应商")
        }

        if( mode==null || mode==""){
          this.$message.warning("运输方式")
          unSelect = true
          // console.log("请选择供应商")
        }

      })
      if(unSelect){
        return null
      }else{
        this.$http({
          url: this.$http.adornUrl(`purchase/contractapply/save`),
          method: 'post',
          data: this.$http.adornData(this.contactApply)
        }).then((data) => {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
          this.$router.go(-1)
        }).catch((err) => {

        })
      }


    },
    //获取类型下拉选框
    gettypeData(){


      //获取运输方式
      this.$http({
        url: this.$http.adornUrl(`purchase/dict/query/Y001`),
        method: 'get',
      }).then((data) => {
        this.transportMode=data.list
      })


    },
    //选中运输方式下拉选框事件
    transportModeSelectionHandler(){


      this.contactApply.contractDetails.forEach(contracDetail=> {
        this.transportModeSelection.forEach(select => {
          try {
            let val = JSON.parse(select)
            if (contracDetail.orderId == val.id) {

              contracDetail.mode = val.type
            }
          } catch (e) {
            console.log("转换异常", e)
          }

        })

      })
      console.log(this.contactApply.contractDetails)
    }


  }

}
</script>

<style lang="scss" scoped>
.head {

}

::v-deep .el-descriptions-item__cell.el-descriptions-item__label.is-bordered-label {
  width: 150px
}

.materialName {
  font-weight: bold;
  font-size: 22px;
  margin: 10px 0;
  text-align: center;


}

::v-deep .el-descriptions__title {
  font-size: 25px;
  margin-right: 10px;
}

.bottom {
  //margin-top: 20px;
  margin: 20px;
  text-align: right;
}

.placeholder-tab {
  width: 10px;
}

//::v-deep .cell{
//  text-align: center;
//}

//elementui row style
.grid-content {
  line-height: 36px;
  border-radius: 4px;
  min-height: 36px;
  text-align: center;
}

.el-row {
  margin-bottom: 5px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}



.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
